<template>
  <v-container class="m-home-contaienr">
    <v-row>
      <v-col sm="3" md="4" xs="12">
        <!-- 服务器列表 -->
        <v-item-group class="server-list">
          <v-item v-slot="{ isSelected, selectedClass, toggle }">
            <v-card class="mt-6" height="250" v-for="(server, index) in servers" :key="index"
              :class="['server-item', selectedClass]" @click="toggle">

              <v-img :src="server.img" class="align-end" gradient="to centern, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px" cover>
                <v-card-title class="text-white" v-text="server.name"></v-card-title>
              </v-img>
              <v-card-subtitle class="pt-4 server-item-info">
                <div class="server-item-info-online">
                  <v-icon icon="mdi-web"></v-icon>
                  在线人数 {{ server.players }}/{{ server.maxPlayers }}
                </div>
                <div class="server-item-info-ip">
                  <v-icon icon="mdi-ip"></v-icon>
                  {{ server.ip }}
                </div>
                <div class="server-item-info-status">
                  <v-icon icon="mdi-server"></v-icon>
                  服务器状态

                  <div v-if="server.status" class="status active"></div>
                  <div v-else class="status inactive"></div>
                </div>
              </v-card-subtitle>
            </v-card>
          </v-item>
        </v-item-group>
      </v-col>
      <v-col sm="9" md="8" xs="12">

        <v-container>
          <v-them-provider>
            <!-- 快捷功能(包含玩家和腐竹功能) -->
            <v-row dense>
              <v-col cols="12">
                <v-card>
                  <v-card-title class="text-h5">
                    白名单自助申请
                  </v-card-title>
                  <v-card-subtitle>在线申请白名单，审核结果将由QQ机器人通知</v-card-subtitle>
                  <v-card-actions>
                    <v-btn variant="text">
                      开始行动
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
              <v-col cols="12">
                <v-card>
                  <v-card-title class="text-h5">
                    账号自助迁移
                  </v-card-title>
                  <v-card-subtitle>迁移行为需要慎重且申请后等待审核通过完成自助迁移</v-card-subtitle>
                  <v-card-actions>
                    <v-btn variant="text">
                      开始行动
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
              <v-col cols="12">
                <v-card>
                  <v-card-title class="text-h5">
                    在线举报
                  </v-card-title>
                  <v-card-subtitle>详细描述案发经过场景，以及提供可能存在的人证无证以及嫌疑人ID</v-card-subtitle>
                  <v-card-actions>
                    <v-btn variant="text">
                      开始行动
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
            </v-row>
          </v-them-provider>
        </v-container>

      </v-col>
    </v-row>
    <v-spacer />
    <v-row>
      <v-col class="px-3" cols="12">
        <!-- 下方内容 -->
        <v-card class="px-3 py-4">
          <v-card-title>Bottom Content</v-card-title>
          <plaerList />
        </v-card>
      </v-col>
    </v-row>
    <v-spacer />
  </v-container>
</template>

<style lang="scss">
.m-home-contaienr {

  // background-color: pink;
  background-color: none;
  color: #fff !important;

  .server {

    &-item {

      .v-img__gradient {
        background-image: linear-gradient(rgb(181 91 126 / 75%), rgb(241 225 225 / 50%));
        transition: all .5s;

        &:hover {
          background-image: linear-gradient(rgb(185 122 122 / 0%), rgb(241 225 225 / 0%));
        }
      }

      &-info {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;

        &-status,
        &-online,
        &-ip {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
        }
      }


    }
  }
}

.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.active {
  background-color: green;
}

.inactive {
  background-color: red;
}
</style>
  
<script lang="ts" setup>
import type { websiteType } from '@/service/types';
import { assert } from 'console';
import { reactive } from 'vue';

//组件列表
const plaerList = defineAsyncComponent(() => import(/* webpackPrefetch: true */'./PlayerList.vue'));

const title = ref("Minecraft 私服通用官网");

const servers = reactive([
  {
    name: '1.20 主服务器 第八周目',
    ip: '192.168.0.1',
    status: true,
    players: 10,
    maxPlayers: 20,
    img: "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/ai/img_1.png"
  },
  {
    name: '小游戏服务器',
    ip: '192.168.0.2',
    status: false,
    players: 5,
    maxPlayers: 10,
    img: "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/ai/img_2.png"
  },
  {
    name: '创造服务器',
    ip: '192.168.0.3',
    status: true,
    players: 16,
    maxPlayers: 30,
    img: "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/ai/bgc_2.png"
  },
]);


//常用网站，具体的机器建筑教程之类的放到对应档案
const websiteLst = reactive<websiteType[]>([
  { title: '皮肤站', source: 'CTU', url: 'https://zh-cn.namemc.com/minecraft-skins', type: '皮肤', desc: '找皮肤用' },
  { title: 'Xplush整合包', source: 'CTU', url: 'https://beta.mcbbs.net/resource/modpack/eerqnkj3', type: '模组' },
  { title: '壹号方块', source: 'CTU', url: 'https://space.bilibili.com/509727442/channel/collectiondetail?sid=410005', type: '红石教程' }
]);


</script>
  